<template>
	<div class="record-plane">
		<div class="opers flex v-c">
  			<el-form :inline="true" class="filter-blk flex-1">
				<el-form-item label="器材类型">
					<el-select v-model="fireEquipmentTypeId" placeholder="请选择" clearable @change="typeChange">
				      	<el-option :label="item.name" :value="item.id" v-for="(item, key) in typeList":key="index"></el-option>
				    </el-select>
				</el-form-item>
			</el-form>
  		</div>
  		<el-table
  			class="mt-20"
			:data="dataList" 
			style="width: 100%"
			v-loading="loading">
		    <el-table-column prop="fireEquipmentTypeName" label="器材类型"></el-table-column>
		    <el-table-column prop="spec" label="规格"></el-table-column>
		    <el-table-column prop="num" label="数量"></el-table-column>
		</el-table>
		<el-pagination
			v-if="total>0"
			class="text-right mt-20 mr-20"
	      	@current-change="handleCurrentChange"
	      	:current-page="currentPage"
	      	:page-size="pageSize"
	      	layout="prev, pager, next, total, jumper"
	      	:total="total">
	    </el-pagination>
	</div>
</template>
<script>
export default {
	name: 'recordPlan',
	props: {
		id: {
			type: String,
			default: "",
		}
	},
	computed: {},
	watch: {},
	data () {
		return {
			fireEquipmentTypeId: '',
			typeList: [],
			total: 0,
			loading: false,
			currentPage:1,
			pageSize: 10,
			dataList:[],
			activeImg: '',
			viewing: false,
			viewModalVisible: false,
			readonly: true,
			detail: {}
		}
	},
	methods: {
		getData (page) {
			this.loading = true
			this.$get('/check/fireEquipment/fireEquipmentListPage', {
				page: page,
				limit: this.pageSize,
				businessId: this.id,
				fireEquipmentTypeId: this.fireEquipmentTypeId,
			}).then(res => {
				this.loading = false
            	let data = res.data
                this.currentPage = page
                this.total = data.totalSize
                this.dataList = data.Items
            }, (err) =>{
            	this.loading = false
            	this.$message.error(err.msg)
            })
		},
		getType () {
			this.$get('/check/fireEquipment/fireEquipmentTypeList').then(res => {
            	this.typeList = res.data
            }, (err) =>{
            	// 
            })
			// 
		},
		viewAction (item) {
			this.viewing = true
			this.$get('/check/firecontrolPerson/firecontrolPersonDetail', {id: item.id}).then(res => {
				this.viewing = false
            	this.detail = res.data
            	this.viewModalVisible = true
            }, (err) =>{
            	// 
            })
		},
		typeChange (value) {
			this.getData(1)
		},
		dateChange (value) {
			this.getData(1)
		}
	},
	created () {
		this.getData(1)
		this.getType()
	}
}
</script>